<template>
    <div class="scroll">
        <ul
                v-infinite-scroll="loadMore"
                infinite-scroll-disabled="loading"
                infinite-scroll-distance="0">
            <li v-for="(user,key) in users" :key="key" @click="open(key)">{{key+1}}.学号：{{user.userSid}}</li>
        </ul>
    </div>
</template>

<script>
    import {allUser} from "../../../api";
    import { MessageBox } from 'mint-ui';

    export default {
        name: "AllUser",
        data(){
            return {
                loading: false,
                page: 1,
                size: 10,
                users: {

                }
            }
        },
        async mounted() {
            let data = {
                page: this.page,
                size: this.size
            }
            let result = await allUser(data)
            this.users = result.data.content
        },
        methods:{
            async loadMore() {
                console.log('1')
               this.page = this.page + 1
                let data = {
                    page: this.page,
                    size: this.size
                }
                let result = await allUser(data)
                let _this = this
                result.data.content.forEach(function (value) {
                    _this.users.push(value)
                })
                if(result.data.totalPages == this.page){
                    this.loading = true
                }
            },
            open(key){
                MessageBox({
                    title: this.users[key].name + '的信息',
                    message: '学号：'+this.users[key].userSid+'<br>' +
                        '姓名：'+this.users[key].name+'<br>' +
                        '联系方式：'+this.users[key].phone+'<br>',
                    showCancelButton: true
                });
            }
        }
    }
</script>

<style scoped>
    ul li{
        list-style-type: none;
    }
    .scroll{
        height: 200px;
        overflow-y:auto;
    }
</style>